<template>
    <div class="login">
      <div class="titel">登录页面</div>
      <div><input type="text" placeholder="请输入电话号码" class="input" v-model="formData.phone"></div>
      <div><input type="password" placeholder="请输你的密码" class="input" v-model="formData.pass"></div>
      <div><input type="button" value="登录" class="btn" @click="login()"></div>
      <div><input type="button" value="去注册" class="btn" @click="$router.push('/register')"></div>
      
    </div>
  </template>
  
  <script scoped>
  import {user_login} from '../utils/api'
  export default {
        data() {
            return {
                formData:{
                    phone:'',
                    pass:'',
                }
            }
        },
        methods: {
        login(){
            if(this.formData.phone == ''){
                alert('请输入手机号');
            }else if(this.formData.pass ==''){
                alert('请输入密码');
            }else{
                // 进行请求登录
                user_login(this.formData).then((res)=>{
                    if(res.data.code==200){
                        // 要先保存用户的登录信息
                        localStorage.setItem('token',res.data.token);
                        localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
                        // 进行路由跳转，跳转到首页
                        this.$router.push('/')
                    }else{
                        alert('登录失败！')
                    }
                })
            }
        }
    },
  }
  </script>
  
  <style >
  *{
      margin: 0;padding: 0;
  }
      .login{
          width: 100%;
          height: 100%;
          text-align: center;
          /* padding: 10px; */
      }
      .titel{
          font-weight: bold;
          margin: 10px 0;
      }
      .login input{
          width: 90%;
          /* height: 30px; */
          padding: 5px 10px;
          line-height: 30px;
          border-radius: 10px;
          margin: 10px 0;
      }
      .btn{
          background-color: lightskyblue;
      }
  </style>